<template>
    <div class="register-container">
        <el-card class="register-card">
            <h2 class="register-title">注册</h2>
            <el-form :model="form" ref="formObject" :rules="rules" label-width="100px" @keyup.enter="handleRegister">
                <el-form-item label="昵称" prop="realName">
                    <el-input v-model="form.realName" placeholder="昵称"></el-input>
                </el-form-item>
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="form.username" placeholder="输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="form.password" placeholder="输入密码"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="confirmPassword">
                    <el-input type="password" v-model="form.confirmPassword" placeholder="确认密码"></el-input>
                </el-form-item>
                <el-form-item class="form-item-center">
                    <el-button type="primary" @click="handleRegister" style="width: 100%;">注册</el-button>
                </el-form-item>
                <el-form-item class="form-item-center">
                    <span class="login-link" @click="goToLogin">已有账号？前往登录</span>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import router from '@/router';
import userApi from '@/api/userApi';

// 表单数据
const form = ref({
    realName:'',
    username: '',
    password: '',
    confirmPassword: ''
});

const formObject = ref(null);

// 表单验证规则
const rules = {
    realName: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
    username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
    confirmPassword: [
        { required: true, message: '请确认密码', trigger: 'blur' },
        {
            validator: (rule, value, callback) => {
                if (value !== form.value.password) {
                    callback(new Error('两次输入的密码不一致'));
                } else {
                    callback();
                }
            }, trigger: 'blur'
        }
    ]
};




// 处理注册
const handleRegister = () => {
    formObject.value.validate((valid) => {
        if (valid) {
            userApi.register(form.value.realName, form.value.username, form.value.password)
                .then(resp => {
                    if (resp.code === 10000) {
                        ElMessage.success('注册成功');
                        router.push("/login");
                    } else {
                        ElMessage.error('注册失败');
                    }
                });
        } else {
            ElMessage.error("请检查输入");
        }
    });
};

// 跳转到登录页面
const goToLogin = () => {
    router.push("/login");
};


</script>

<style scoped>
.el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
    content: ' ';
    width: 0px;
    margin-right: 0px;
}

.register-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: linear-gradient(to right, #00c6ff, #0072ff);
    animation: fadeIn 1s ease-in-out;
}

.register-card {
    width: 400px;
    padding: 20px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    background-color: white;
    animation: slideInUp 1s ease-in-out;
}

.register-title {
    text-align: center;
    font-size: 24px;
    margin-bottom: 20px;
    color: #333;
}

.captcha-image {
    cursor: pointer;
    height: 40px;
    border-radius: 5px;
}

.form-item-center {
    text-align: center;
}

.login-link {
    color: #0072ff;
    cursor: pointer;
}

.login-link:hover {
    text-decoration: underline;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideInUp {
    from {
        transform: translateY(100px);
    }

    to {
        transform: translateY(0);
    }
}
</style>